<script setup name="formFileReport">
	import {
		toRefs,
		reactive,
	} from 'vue';

	import {
		ElMessage
	} from 'element-plus'
	import api from '@/api/api';
	import config from '@/utils/config.js';
	import util from '@/utils/util';

	// 参数接收
	// const props = defineProps({
	// 	info: {
	// 		type: Object,
	// 		default: () => {
	// 			return {};
	// 		},
	// 	},
	// })
	// const {
	// 	info
	// } = toRefs(props);

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();
	const token = localStorage.getItem('token');

	// 上传失败
	function handleError(e) {
		console.log('handleError', e);
	}

	// 上传成功
	function handleSuccess(response, file, fileList) {
		// console.log('success response', response);
		console.log('success file', file);

		file = {
			url: response.fileName,
		}
		// console.log('success fileList', fileList);
	}

	// 文件类型限制JPG/JPEG/PNG/PDF/WORD
	const fileType = reactive(['doc', 'docx', 'pdf', 'png', 'jpg', 'jpeg']);
	// 准备上传
	function beforeUpload(file) {

		// 校检文件类型
		const fileName = file.name.split('.');
		const fileExt = fileName[fileName.length - 1];
		const isTypeOk = fileType.indexOf(fileExt) >= 0;
		if (!isTypeOk) {
			ElMessage.error(`文件格式不正确, 请上传${fileType.join("/")}格式文件!`);
			return false;
		}

		const isLt10M = file.size / 1024 / 1024 < 10;
		if (!isLt10M) {
			ElMessage.error('上传附件大小不能超过 10MB!');
		}

		return isLt10M;
	}

	// 展示额图片
	function getPreviewImage(url) {
		// console.log(url);
		const arr = url.split('.');
		// console.log(arr[arr.length-1]);
		const hou = arr[arr.length - 1];
		console.log(hou);

		if (['doc', 'docx'].includes(hou)) {
			return util.getImageUrl('WORD.png');
		}

		if (['pdf', 'pdfx'].includes(hou)) {
			return util.getImageUrl('PDF.png');
		}

		return url;
	}

	// 刪除
	function changeDele(file) {
		// console.log(file.uid);
		// console.log(modelValue.value);

		const index = modelValue.value.find((item) => item.uid == file.uid);
		modelValue.value.splice(index, 1);
	}

	// 回调
	const emit = defineEmits(["change", ""]);
</script>

<template>
	<!-- auto-upload 是否请求接口 -->
	<el-upload list-type="picture" v-model:file-list="modelValue" class="upload-demo"
		:action="`${config.host}/common/upload`" :headers="{
			'Authorization': `Bearer ${token}`}" :before-upload="beforeUpload" :on-error="handleError"
		:on-success="handleSuccess" :auto-upload="true" style="width: 100%;">
		<el-button type="primary" plain size="large">
			<el-icon style="margin-right: 5px;">
				<Upload />
			</el-icon>
			上传附件
		</el-button>

		<template #tip>
			<div class="el-upload__tip">
				<!-- 文档最大限制10M,上传格式支持JPG/JPEG/PNG/PDF/WORD建议先下载申请承诺书模板,完成并上传后再填写网页信息 -->
			</div>
		</template>

		<template #file="{ file }">
			<div class="preview" v-if="file" style="width: 100%;">
				<el-image :src="getPreviewImage(file.response?.url || file.name)" fit="cover" class="preview-image" />
				<p>{{file.response?.newFileName || file.name}}</p>
				<el-icon @click="changeDele(file)">
					<CloseBold />
				</el-icon>
			</div>
		</template>
	</el-upload>
</template>

<style lang="scss" scoped>
	.el-upload__tip {
		font-weight: 400;
		font-size: 14px;
		color: #999999;
	}

	.preview {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
		// width: 50%;

		.preview-image {
			width: 70px;
			height: 70px;
			border-radius: 10px;
		}

		p {
			margin-left: 15px;
		}

		.el-icon {
			cursor: pointer;
			position: absolute;
			top: 10px;
			right: 10px
		}
	}
</style>